<!-- 资讯详情 frame  -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>资讯详情</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/message/message_detail/message_detail.wxss */

.natice_info {
  padding: 0 .38rem;
  background: #fff;
  margin-bottom: .20rem;
}

.header1 {
  padding-top: .52rem;
}

.hd_title {
  min-height: .50rem;
  font-size: .36rem;
  color: #222;
  font-weight: bold;
  margin-bottom: .30rem;
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden; */
}

.hd_bottom {
  display: flex;
  margin-bottom: .40rem;
}

.hd_time, .hd_type_name {
  font-size: .28rem;
  color: #999;
}

.con_text {
  color: #666;
}

.notice_img {
  width: 6.70rem;
  height: 4.42rem;
  margin-bottom: .20rem;
}

.comment_list {
  background: #fff;
  padding: 0 .30rem 0 .24rem;
  margin-bottom: 1.15rem;
}

.comment_title {
  height: .31rem;
  line-height: .31rem;
  font-size: .32rem;
  color: #222;
  font-weight: 800;
  padding-top: .40rem;
  margin-bottom: .10rem;
}

.comm_item {
  display: flex;
  margin-left: .06rem;
  border-bottom: .01rem solid #eee;
}

.user_pic {
  width: .60rem;
  height: .60rem;
  border-radius: 50%;
  margin: .34rem .24rem 0 .20rem;
}

.comm_info {
  flex: auto;
}

.comm_top {
  display: flex;
  align-items: center;
  margin-top: .40rem;
  margin-bottom: .10rem;
}

.user_name {
  flex: auto;
  font-size: .32rem;
  color: #333;
  font-weight: 800;
}

.reply_num, .zan {
  display: flex;
  width: 1.05rem;
  align-items: center;
  margin-top: -.15rem;
}

.reply_icon {
  width: .36rem;
  height: .36rem;
  font-size: .36rem;
  color: #999;
  margin-right: .10rem;
}
.zan_icon {
  width: .36rem;
  height: .36rem;
  font-size: .36rem;
  color: #999;
  margin-right: .10rem;
}


.comment_status{
  height: 1.40rem;
  line-height: 1.40rem;
  text-align: center;
  font-size: .30rem;
  color: #333;
}

.active {
  width: .36rem;
  height: .36rem;
  font-size: .36rem;
  color: #000;
  margin-right: .10rem;
}

.num {
  font-size: .28rem;
  color: #999;
}

.comm_context {
  font-size: .32rem;
  line-height: .42rem;
  color: #666;
  margin-bottom: .20rem;
}

.com_b_box {
  display: flex;
}

.comm_time, .reply_text {
  height: .24rem;
  line-height: .24rem;
  font-size: .24rem;
  color: #999;
  margin-bottom: .20rem;
}

.reply_comm {
  padding: .20rem .15rem;
  background: #f6f6f6;
  border-radius: .10px;
  margin-bottom: .30rem;
}

.reply_item {
  line-height: .30rem;
	display: flex;
}

.rpl_name {
  font-size: .28rem;
  color: #28aafa;
  margin-right: .18rem;
}

.rpl_text {
  font-size: .28rem;
  color: #333;
}

.publish_comment {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.00rem;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  padding-left: .15rem;
  z-index: 1;
}

.comment_sign {
  display: flex;
  padding-left: .15rem;
}

.zan_box {
  display: flex;
  align-items: center;
  margin-right: .30rem;
}

button[plain] {
  border: none;
}

.submit-btn {
  width: 0.7rem;
  height: .50rem;
  line-height: .50rem;
  text-align: center;
}

.share_icon {
  width: .36rem;
  font-size: .36rem;
  color: #999;
  margin-right: .10rem;
}

.share_btn {
  display: flex;
}

.pub_btn {
  flex: auto;
  display: flex;
  align-items: center;
  margin-right: .40rem;
}

.pub_input {
  flex: auto;
  height: .64rem;
  line-height: .64rem;
  font-size: .28rem;
  color: #333;
  background: #f4f4f4;
  border-radius: .32rem;
  padding: 0 .20rem;
	border: solid #F8F8F8 0px;
}

.placeholder {
  text-align: center;
}

input {
  caret-color: #666;
}

.btn1 {
  height: .60rem;
  line-height: .60rem;
  font-size: .30rem;
  color: #ffb800;
  margin-left: .20rem;
}

.reply_box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.00rem;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  z-index: 5;
}

.rep_input {
  flex: auto;
  height: .64rem;
  line-height: .64rem;
  font-size: .28rem;
  color: #333;
  background: #f4f4f4;
  border-radius: .32rem;
  margin: 0 .20rem;
  padding: 0 .20rem;
}

.rep_btn {
  height: .60rem;
  line-height: .60rem;
  font-size: .30rem;
  color: #ffb800;
  margin-right: .20rem;
}
.newsDetails{
		width:100%;
		line-height:0.5rem;
		}
.newsDetails img{
			width:100%!important;
			margin: 0.2rem 0;
	}

	</style>
</head>
<body>
	<div class="content app" v-cloak>


		<div class="wrap" @click='blur'>
		  <div class="natice_info">
		    <div class="header1">
		      <div class="hd_title">{{noticeDetail.title}}</div>
		      <div class="hd_bottom">
		        <div class="hd_time" style="margin-right:.60rem;">{{noticeDetail.create_time ? noticeDetail.create_time.slice(0,10) : ''}}</div>
		        <div class="hd_type_name">{{noticeDetail.type_name}}</div>
		      </div>
		    </div>
		    <div class="notice_content">
		      <div class="con_text">
						<div v-html="noticeDetail.content" class="newsDetails"></div>
		        <!-- <rich-text nodes="{{noticeDetail.content}}"></rich-text> -->
		      </div>
		      <image class="notice_img" :src="noticeDetail.cover_img"></image>
		    </div>
		  </div>


			<div class="comment_list">
		    <div class="comment_title">评论</div>
		    <div class="comment_box">
		      <div class="comm_item" v-for="(item,index) in noticeDetail.comment" :key="index">
		        <div class="pic_box">
		          <image class="user_pic" :src="item.headimgurl"></image>
		        </div>
		        <div class="comm_info">
		          <div class="comm_top">
		            <div class="user_name">{{item.nickname}}</div>
		            <div class="reply_num" style="margin-right:.40rem;">
		              <div class="iconfont iconhuifu reply_icon"></div>
		              <div class="num">{{item.replies?(item.replies.length > 99? '99+':item.replies.length):''}}</div>
		            </div>
		            <div class="zan" @click="rem(item.id)" >
		              <div v-if="item.is_zan" class="iconfont icondianzan active"></div>
		              <div v-else class="iconfont icondianzan zan_icon"></div>
									<div class="num" style="padding-top:0.1rem">{{item ?(item.like_count > 99? '99+':item.like_count):''}}</div>
		            </div>
		          </div>
		            <div class="comm_context">{{item.content}}</div>
		            <div class="com_b_box">
		              <div class="comm_time">{{item.create_time}}</div>
		              <div class="reply_text" style="margin-left:.50rem;" @click.stop="rep_com(item.id,item.user_id)">回复</div>
		              <!-- <div class="reply_box" v-if="{{hide}}">
		                <input class="rep_input" placeholder="回复评论" value="{{inputValue}}" bindinput="inputValue" bindblur="blur2" focus="{{focus}}"></input>
		                <div class="rep_btn">回复</div>
		              </div> -->
		            </div>
		            <div v-if="item.replies.length">
		              <div class="reply_comm">
		                <div class="reply_item" style=" margin-bottom: .10rem;" v-for="(item,index) in item.replies" :key="index">
		                  <div class="rpl_name">{{item.nickname}}:</div>
		                  <div class="rpl_text">{{item.content}}</div>
		                </div>
		              </div>
		            </div>
		        </div>
		      </div>
		    </div>
		    <div v-if="noticeDetail.comment" class="comment_status">{{comText}}</div>
		    <div v-else class="comment_status">{{comText}}</div>
		  </div>
		  <div class="publish_comment" v-if="pubBox">
		    <div class="comment_sign" v-if="show">
		      <div class="zan_box" @click="notice_zan">
		        <div class="iconfont icondianzan zan_icon"></div>
						<div class="num" style="padding-top:0.1rem">{{noticeDetail?(noticeDetail.zan_count > 99? '99+':noticeDetail.zan_count):''}}</div>
		      </div>
		      <div class="submit-btn" plain='true' open-type='share' @click="launchMiniProgram">
		        <div class="share_btn">
		          <div class="iconfont iconfenxiang1 share_icon"></div>
		          <!-- <div class="num">{{noticeDetail.share_count}}div> -->
		        </div>
		      </div>
		    </div>
		    <div class="pub_btn">
		      <input class="pub_input" placeholder="发布评论" value="inputValue" placeholder-class="placeholder" v-model="inputValue" bindfocus="focus" ></input>
		      <div class="btn1" @click="publish">发布</div>
		    </div>
		  </div>
		</div>



		<div class="publish_comment" v-if="repBox" >
		  <div class="pub_btn">
		    <input class="pub_input" ref="loginName" placeholder="回复评论" focus="{{focus}}" value="inputValue2" placeholder-class="placeholder" v-model="inputValue2"  ></input>
		    <div class="btn1" @click="reply">回复</div>
		  </div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			//资讯ID
		     noticeId: '',
		     commentId: '',
		     type_name: '',
		     show: true,
		     hide: false,
		     inputValue: '',
		     inputValue2: '',
		     repBox: false,
		     pubBox: true,
		     focus: true,
				 noticeDetail:'',
				 item:'',
				 comText:'',
				 userInfoId:'',//用户id
		},
		mounted: function(){
			  this.noticeId = api.pageParam.id
				this.userInfoId = localdata.get("userinfo").id;
				this.getData()
		},
		methods: {
					//获取数据
					getData: function (loader){
						console.log(this.noticeId);
						let id = this.noticeId
						AjaxSafe({
					   		url:"/xapp/index/noticeInfo/"+id,
					    	loader:loader,
							success: function(res) {
							    if (res.state) {
							        vm.noticeDetail = res.data
							    } else {
							    	api.toast({
											msg: res.msg,
											duration: 2000,
											location: 'middle'
										});
							    }
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},
					// 给资讯点赞
					notice_zan (){
						let param = {
							notice_id: this.noticeId
						}
						AjaxSafe({
					   		url:"/xapp/user/noticeZan",
					    	data:param,
					    	loader:true,
							success: function(res) {
							    if (res.state) {
							      vm.getData(false)
							    }
						    	api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},
					// 给评论点赞
					rem (id){
						let param = {
								comment_id: id
						}
						AjaxSafe({
					   		url:"/xapp/user/commentZan",
					    	data:param,
					    	loader:true,
							success: function(res) {
							    	api.toast({
											msg: res.msg,
											duration: 2000,
											location: 'middle'
										});
										vm.getData(false)
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},
					// 发布评论
					publish (){
						if(!this.inputValue){
							api.toast({
								msg: '内容不能为空',
								duration: 2000,
								location: 'middle'
							});
							return
						}
						let param = {
							notice_id: this.noticeId,
			        content: this.inputValue,
			        user_id: this.userInfoId
						}
						AjaxSafe({
					   		url:"/xapp/index/noticeComment",
					    	data:param,
					    	loader:true,
							success: function(res) {
							    if (res.state) {
							        vm.inputValue = ''
											vm.getData(false)
							    }
									api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},
					// 回复
					rep_com(id){
						vm.inputValue2 = ''
						this.commentId = id
						this.repBox = true
						this.$nextTick( () =>{
						this.$refs.loginName.focus()
						})
					},
					// 隐藏输入框
					blur(){
						this.repBox = false
					},
					// 发送回复信息
					reply(){
						console.log(this.inputValue2);
						let param = {
							notice_id: this.noticeId,
			        content: this.inputValue2,
			        user_id: this.userInfoId,
			        comment_id: this.commentId
						}
						AjaxSafe({
					   		url:'/xapp/index/noticeComment',
					    	data:param,
					    	loader:true,
							success: function(res) {
								if (res.state) {
									vm.repBox = false
									vm.inputValue2 = ''
									vm.getData(false)
								}
							    	api.toast({
											msg: res.msg,
											duration: 2000,
											location: 'middle'
										});

							},
							failed: function(err){
									alert("网络故障！");
							}
						});
					},
					// 分享
					launchMiniProgram(){
						var wx = api.require('wx');
						wx.shareProgram({
								// apiKey: 'wxa6cb58e0fd5ef491',
								scene: 'session',
								title: '中科易购',
								description: '专注为用户提供一站式、专业服务的集垂直网站、无线互联电商、咨询为一体的娱乐新媒体平台',
								miniProgramType:'release',
								thumb: 'widget://image/log1.png',
								webpageUrl: 'http://apicloud.com',
								userName: 'gh_41fadd4eab17',
								path: 'pages/index/index',
						}, function(ret, err) {
								if (ret.status) {
										alert('分享成功');
								} else {
										alert(err.code);
								}
						});
					},

		},

	});
}

</script>
</html>
